<html>
<style>
table {
  border-collapse: collapse;
  border-spacing: none;
  }

thead th {
  background-color: #F7BE81;
  font-size: 12px;
  font-family: sans-serif;
  border:none;  
  }

tbody td {
  font-size: 12px;   
}

tr td:first-child,
tr th:first-child {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
}

tr td:last-child,
tr th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

</style>

<div ng-app="myApp" >
<h3>Replacement Page</h3> <!--class = "well" -->
 
 <!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="tabid">
  <li role="presentation" class="active"  ng-click="getRepPair()">
	<a href="#pair" role="tab" data-toggle="tab">Replace Pairing</a></li>
  <li role="presentation" ng-click="getRepCard()"><a href="#card" role="tab" data-toggle="tab">Replace Card</a></li>
  <li role="presentation" ng-click="getRepStb()"><a href="#stb" role="tab" data-toggle="tab" >Replace STB</a></li>  
</ul>

<!-- Tab panes -->
<div class="tab-content">
	<div role="tabpanel" class="tab-pane fade" id="pair">
		<form  method="post" action=""> 
		<input type="hidden" ng-value="pair"/>
			<table>
				<tr>			
					<td width="150"><b>&nbsp;&nbsp;* Previous Pair: </b></td>
					<td>
						<input type="text" ng-model="newpairmast.oldstb"  maxlength="8" auto-complete ui-items="postbarr" ng-init="stbgiven('1')" ng-change="stbgiven('1')" placeholder="Old STB" class="input-small">
						<input type="hidden" ng-model="newpairmast.id"/>
					</td>
					<td> - </td>
					<td><input type="text" ng-model="newpairmast.oldcard"  maxlength="16" placeholder="Old Card" class="input-medium" auto-complete ui-items="pocardarr"></td>

					<td ><b>&nbsp;&nbsp;&nbsp;&nbsp;Replacement Reason:&nbsp;&nbsp;</b></td>
					<td>
						<select ng-model="newpairmast.reason" >
							<option value=''>--</option>
							<option>Release</option>
							<option>Faulty</option>
							<option>Blacklist</option>
						</select>
					</td>
				</tr>
				<tr>
					<td width="80" ><b>&nbsp;&nbsp;* Newer Pair: </b></td>
					<td >
						<input type="text" ng-model="newpairmast.newstb"  maxlength="8" placeholder="Revised STB" class="input-small" auto-complete ui-items="pfstbarr" ng-change="stbgiven('2')">
					</td>
					<td> - </td>
					<td>
						<input type="text" ng-model="newpairmast.newcard"  maxlength="16" placeholder="Revised Card" class="input-medium" auto-complete ui-items="pfcardarr">
					</td>		
					<td><b>&nbsp;&nbsp;&nbsp;&nbsp;Comments: </b></td>
					<td><input type="text" ng-model="newpairmast.comments"></td>	
				</tr>	
				<tr>
					<td width="150"><b>&nbsp;&nbsp;* Replace Date: </b></td>
					<td colspan="2"><input type="text" ng-model="newpairmast.rdate"  jqdatepicker class="input-small"></td>
				</tr>				
		   </table>
			<a class="btn btn-success" href="#/updte/" ng-click="upd(newpairmast,'replacePair')" ng-disabled="!p_ed">Update</a>
			<a class="btn btn-info"  ng-click="sv(newpairmast,'replacePair')" ng-disabled="p_ed">Save</a>
			<a class="btn" href="#/cancel/" ng-click="cancel()" >Clear</a> 	
			<input type="text" ng-model="name" class="search-query" placeholder="Search"/><br/><br/>     
			
			<table class="table table-striped table-condensed table-hover">
				<thead>
					<tr>
						<th>ID</th>					
						<th>Previous Pair</th>					
						<th>Changed Pair</th>					     
						<th>Date of Replacement</th>					     
						<th>Reason of Replacement</th>					     
						<th>Comments</th>					     											    
						<th>Delete</th>					     											    
						<!--<th>Edit</th>-->					     											    
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in pairmast | filter: name | orderBy:predicate:reverse | startingFrom:currentPage*pageSize | limitTo:pageSize">
						 <td>{{item.id}}</td>						
						<td>{{item.oldstb}} - {{item.oldcard}}</td>						 
						<td>{{item.newstb}} - {{item.newcard}}</td>						 
						<td>{{item.rdate | date:'dd-MM-yyyy'}}</td>						 
						<td>{{item.reason}}</td>						 
						<td>{{item.comments}}</td>						 											 
						<td><a href="#/delete/" ng-click="dlt(item.id,'replacePair')"> 
						<img src="glyphicons_bin.png" alt="Delete" width="15" height="15"/></a></td> 
						<!--<td><a ng-click="edit(item.id,'pairmast')"> 
							<img src="glyphicons_edit.png" alt="Edit" /></a></td> -->
					</tr>
				</tbody>
	   
				<tfoot>					
					<td colspan="7">
						<div class="pagination pull-left">  
							Current Page  {{currentPage+1}} of {{Math.ceil(pairmast.length/pageSize)}}	
						</div>
						<div class="pagination pull-right">
							<ul>            
								<button class="btn btn-info" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
									&lt;&lt; Prev 
								</button>                                
								<li ng-repeat="n in range(pairmast.length)" ng-class="{active: n == currentPage}" ng-click="setPage()">
									<a href ng-bind="n + 1">1</a>
								</li>                     
								<button class="btn btn-info" ng-disabled="currentPage >= pairmast.length/pageSize - 1" ng-click="currentPage=currentPage+1">  
									Next &gt;&gt;   
								</button>
							</ul>
						</div>
					</td>
				</tfoot>
			</table>
		</form>
    </div> <!--end first tab -->
	
	<div role="tabpanel" class="tab-pane fade" id="card">
		<form  method="post" action="">
		<input type="hidden" ng-value="card"/>
			<table>
				<tr>			
					<td width="150"><b>&nbsp;&nbsp;* New Card No.: </b></td>
					<td><input type="text" ng-model="newrcardmast.newcard"  maxlength="16" auto-complete ui-items="fcardarr" class="input-medium"></td>		
					
					<td width="80" ><b>&nbsp;&nbsp;* Old Card No.: </b></td>
					<td><input type="text" ng-model="newrcardmast.oldcard"  maxlength="16" auto-complete ui-items="ocardarr" ng-init="cardgiven()" ng-change="cardgiven()" class="input-medium"></td>

					<td width="80" ><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;STB Number: </b></td>
					<td><input type="text" ng-model="newrcardmast.stb"  maxlength="8" readonly></td>
				</tr>	
				<tr>
					<td width="150"><b>&nbsp;&nbsp;* Replace Date: </b></td>
					<td><input type="text" ng-model="newrcardmast.rdate"  jqdatepicker class="input-small"></td>	

					<td width="170"><b>&nbsp;&nbsp;&nbsp;&nbsp;Replacement Reason: </b></td>
					<td><select ng-model="newrcardmast.reason" >
							<option value=''>--</option>
							<option>Release</option>
							<option>Faulty</option>
							<option>Blacklist</option>
						</select></td>
				
					<td width="170"><b>&nbsp;&nbsp;&nbsp;&nbsp;Comments: </b></td>
					<td><input type="text" ng-model="newrcardmast.comments" ></td>					
				</tr>
		   </table>
		   
			<a class="btn btn-success" href="#/updte/" ng-click="upd(newrcardmast,'replaceCard')" ng-disabled="!c_ed">Update</a>
			<a class="btn btn-info"  ng-click="sv(newrcardmast,'replaceCard')" ng-disabled="c_ed">Save</a>
			<a class="btn" href="#/cancel/" ng-click="cancel()" >Clear</a> 	
			<input type="text" ng-model="name" class="search-query" placeholder="Search"/><br/><br/>     
			
			<table class="table table-striped table-condensed table-hover">
				<thead>
					<tr>
						<th>ID</th>											
						<th>New Card No.</th>					     
						<th>Old Card No.</th>					     
						<th>STB No.</th>					     
						<th>Date of Replacement</th>					     
						<th>Reason of Replacement</th>					     
						<th>Comments</th>					     											    
						<th>Delete</th>					     											    
						<th>Edit</th>					     											    
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in rcardmast | filter: name | orderBy:predicate:reverse | startingFrom:currentPage*pageSize | limitTo:pageSize">
						 <td>{{item.id}}</td>						
						<td>{{item.newcard}}</td>						 
						<td>{{item.oldcard}}</td>						 
						<td>{{item.stb}}</td>						 
						<td>{{item.rdate | date:'dd-MM-yyyy'}}</td>						 
						<td>{{item.reason}}</td>						 
						<td>{{item.comments}}</td>						 											 
						<td><a href="#/delete/" ng-click="dlt(item.id,'replaceCard')"> 
						<img src="glyphicons_bin.png" alt="Delete" width="15" height="15"/></a></td> 
						<td><a ng-click="edit(item.id,'rcardmast')"> 
							<img src="glyphicons_edit.png" alt="Edit" /></a></td> 
					</tr>
				</tbody>
	   
				<tfoot>					
					<td colspan="8">
						<div class="pagination pull-left">  
							Current Page  {{currentPage+1}} of {{Math.ceil(rcardmast.length/pageSize)}}	
						</div>
						<div class="pagination pull-right">
							<ul>            
								<button class="btn btn-info" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
									&lt;&lt; Prev 
								</button>                                
								<li ng-repeat="n in range(rcardmast.length)" ng-class="{active: n == currentPage}" ng-click="setPage()">
									<a href ng-bind="n + 1">1</a>
								</li>                     
								<button class="btn btn-info" ng-disabled="currentPage >= rcardmast.length/pageSize - 1" ng-click="currentPage=currentPage+1">  
									Next &gt;&gt;   
								</button>
							</ul>
						</div>
					</td>
				</tfoot>
			</table>
		</form>
    </div>
	
	<div role="tabpanel" class="tab-pane fade" id="stb">
		<form  method="post" action="">  
		<input type="hidden" ng-value="stb"/>
			<table>
				<tr>			
					<td width="150"><b>&nbsp;&nbsp;* New STB Number: </b></td>
					<td><input type="text" ng-model="newrstbmast.newstb"  maxlength="8" auto-complete ui-items="fstbarr" class="input-small"></td>		
					
					<td width="80" ><b>&nbsp;&nbsp;* Old STB Number: </b></td>
					<td>
						<input type="text" ng-model="newrstbmast.oldstb"  maxlength="8" ng-if="newrstbmast.oldstb" ng-init="stbgiven2()" ng-change="stbgiven2()" auto-complete ui-items="ostbarr" class="input-small">
					</td>

					<td width="80" ><b>&nbsp;&nbsp;&nbsp;&nbsp;Card Number: </b></td>
					<td><input type="text" ng-model="newrstbmast.card"  maxlength="16" class="input-medium" readonly></td>
				</tr>	
				<tr>
					<td width="150"><b>&nbsp;&nbsp;* Replace Date: </b></td>
					<td><input type="text" ng-model="newrstbmast.rdate"  jqdatepicker class="input-small"></td>						
				
					<td width="170"><b>&nbsp;&nbsp;&nbsp;&nbsp;Replacement Reason: </b></td>
					<td><select ng-model="newrstbmast.reason" >
							<option value=''>--</option>
							<option>Release</option>
							<option>Faulty</option>
							<option>Blacklist</option>
						</select>
					</td>
				
					<td width="170"><b>&nbsp;&nbsp;&nbsp;&nbsp;Comments: </b></td>
					<td><input type="text" ng-model="newrstbmast.comments"  ></td>					
				</tr>
		   </table>
			<a class="btn btn-success" href="#/updte/" ng-click="upd(newrstbmast,'replaces')" ng-disabled="!s_ed">Update</a>
			<a class="btn btn-info"  ng-click="sv(newrstbmast,'replaces')" ng-disabled="s_ed">Save</a>
			<a class="btn" href="#/cancel/" ng-click="cancel()" >Clear</a> 	
			<input type="text" ng-model="name" class="search-query" placeholder="Search"/><br/><br/>     
			
			<table class="table table-striped table-condensed table-hover">
				<thead>
					<tr>
						<th>ID</th>											
						<th>New STB No.</th>					     
						<th>Old STB No.</th>					     
						<th>Card No.</th>					     
						<th>Date of Replacement</th>					     
						<th>Reason of Replacement</th>					     
						<th>Comments</th>					     											    
						<th>Delete</th>					     											    
						<th>Edit</th>					     											    
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in rstbmast | filter: name | orderBy:predicate:reverse | startingFrom:currentPage*pageSize | limitTo:pageSize">
						 <td>{{item.id}}</td>						
						<td>{{item.newstb}}</td>						 
						<td>{{item.oldstb}}</td>						 
						<td>{{item.card}}</td>						 
						<td>{{item.rdate | date:'dd-MM-yyyy'}}</td>						 
						<td>{{item.reason}}</td>						 
						<td>{{item.comments}}</td>						 											 
						<td><a href="#/delete/" ng-click="dlt(item.id,'replaces')"> 
						<img src="glyphicons_bin.png" alt="Delete" width="15" height="15"/></a></td> 
						<td><a ng-click="edit(item.id,'rstbmast')"> 
							<img src="glyphicons_edit.png" alt="Edit"/></a></td> 
					</tr>
				</tbody>
	   
				<tfoot>					
					<td colspan="8">
						<div class="pagination pull-left">  
							Current Page  {{currentPage+1}} of {{Math.ceil(rstbmast.length/pageSize)}}	
						</div>
						<div class="pagination pull-right">
							<ul>            
								<button class="btn btn-info" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
									&lt;&lt; Prev 
								</button>                                
								<li ng-repeat="n in range(rstbmast.length)" ng-class="{active: n == currentPage}" ng-click="setPage()">
									<a href ng-bind="n + 1">1</a>
								</li>                     
								<button class="btn btn-info" ng-disabled="currentPage >= rstbmast.length/pageSize - 1" ng-click="currentPage=currentPage+1">  
									Next &gt;&gt;   
								</button>
							</ul>
						</div>
					</td>
				</tfoot>
			</table>
		</form>
	</div>  
</div>
		</div>  	 
	</body>
</html>
